<template>
    <div style="width: 150px;height: 100px;display: inline-block" ref="gaugeChart">

    </div>
</template>

<script>
    export default {
      name: 'gauge',
      mounted () {
        this.initColor(this.colorType)
        this.init()
      },
      data () {
        return {
          colorShow: '#1FADFF'
        }
      },
      watch: {
        percent () {
          this.init()
        }
      },
      props: {
        chartName: {
          default: '覆盖区域',
          type: String
        },
        percent: {
          default: 0.5,
          type: String
        },
        colorType: {
          default: 1,
          type: String
        },
        detailNum: {
          default: 1,
          type: String
        }
      },
      methods: {
        initColor (value) {
          if (value === '1') {
            this.colorShow = '#1FADFF'
          } else if (value === '2') {
            this.colorShow = '#01D5EB'
          } else {
            this.colorShow = '#2EC763'
          }
        },
        init () {
          let myChart = this.$echarts.init(this.$refs.gaugeChart)
          let option = {
            background: 'transform',
            series: [
              {
                name: '百分比100%',
                type: 'gauge',
                radius: '100%',
                // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                center: ['50%', '50%'],
                // 仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                  show: false,
                  lineStyle: {       // 属性lineStyle控制线条样式
                    width: 8,
                    color: [[1, '#0b3f5d']]
                  }
                },
                // 分隔线样式。
                splitLine: {
                  show: false
                },
                // 刻度样式
                axisTick: {
                  show: false
                },
                // 刻度标签。
                axisLabel: {
                  show: false
                },
                // 仪表盘指针。
                pointer: {
                  show: false,
                  // 指针长度
                  length: '90%',
                  width: 0
                },
                title: {
                  offsetCenter: [0, '20%'],    // x, y，单位px
                  color: '#a9c5ec'
                },
                data: [
                  {name: this.chartName, value: this.detailNum}
                ],
                detail: {
                  textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    color: '#fff',
                    fontSize: '18'
                  },
                  offsetCenter: [0, '-30%']
                },
                startAngle: 180,
                endAngle: 0,
                zlevel: 1
              },
              {
                startAngle: 180,
                endAngle: 0,
                name: '进度条',
                type: 'gauge',
                radius: '100%',
                // 半径
                center: ['50%', '50%'],
                // 仪表盘轴线相关配置。
                axisLine: {            // 坐标轴线
                  show: true,
                  lineStyle: {       // 属性lineStyle控制线条样式
                    width: 8,
                    color: [[this.percent, this.colorShow]]
                  }
                },
                // 分隔线样式。
                splitLine: {
                  show: false,
                  length: 10,
                  lineStyle: {
                    color: 'white',
                    width: 3
                  }
                },
                // 刻度样式
                axisTick: {
                  show: false
                },
                // 刻度标签。
                axisLabel: {
                  show: false
                },
                // 仪表盘指针。
                pointer: {
                  // 这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                  show: false
                },
                // 仪表盘标题。
                title: {
                  show: false
                },
                // 仪表盘详情，用于显示数据。
                detail: {
                  show: false,
                  offsetCenter: [0, '-10%'],
                  formatter: '',
                  textStyle: {
                    fontSize: 0
                  }
                },
                data: [
                  {name: '数量', value: 21}
                ],
                zlevel: 2
              }
            ]
          }
          myChart.setOption(option)
        }
      }
    }
</script>

<style scoped>

</style>
